<template>
  <div class="home">
    <div class="swiper-content">
      <el-carousel :interval="10000" trigger="click" height="560px">
        <el-carousel-item v-for="(item,index) in list" :key="index">
          <img :src="item.url" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="product-content">
      <section-title title="我们的产品" en-title="our product"></section-title>
      <div class="product-list">
        <div class="product">
          <img src="../assets/image/index_pro_01.png">
          <p class="introduction">快速BI</p>
          <p>简单、快速、敏捷</p>
        </div>
        <div class="product">
          <img src="../assets/image/index_pro_02.png">
          <p class="introduction">智能BI</p>
          <p>强大、专业、智能，帮助企业 </br>快速复制</p>
        </div>
        <div class="product">
          <img src="../assets/image/index_pro_03.png">
          <p class="introduction">数据挖掘</p>
          <p>分布式内存计算，拖拽式设计 </br>挖掘</p>
        </div>
        <div class="product">
          <img src="../assets/image/index_pro_04.png">
          <p class="introduction">统计分析</p>
          <p>100种统计方法，解决企业统计 </br>业务</p>
        </div>
      </div>
      <div class="more-btn">
        more+
      </div>
    </div>
    <div class="banner">
      <img src="../assets/image/banner_center.png" alt="" srcset="">
    </div>
    <div class="partner-content">
      <section-title title="我们的伙伴" en-title="our partner"></section-title>
      <div class="partner-list">
        <ul>
          <li>
            <img src="../assets/image/partner_01.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_02.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_03.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_04.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_05.png" alt="">
          </li>
        </ul>
        <ul>
          <li>
            <img src="../assets/image/partner_06.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_07.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_08.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_09.png" alt="">
          </li>
          <li>
            <img src="../assets/image/partner_10.png" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import sectionTitle from '@/components/sectionTitle.vue'

export default {
  name: 'home',
  components: {
    sectionTitle
  },
  data () {
    return {
      list: [
        {
          url: require('../assets/image/banner_01.png')
        },
        {
          url: require('../assets/image/banner_01.png')
        }
      ]
    }
  }
}
</script>
<style lang="less">
.swiper-content {
  overflow: hidden;
  width: 100%;
  .swiper-img {
    width: 100%;
  }
}
.product-content,.partner-content {
  width: 1200px;
  margin: 0 auto;
}
p.introduction {
  margin: 24px 0 18px 0;
  font-size: 18px;
  color: #333333;
}
.product-list {
  display: flex;
  justify-content:space-around;
}
.product {
  color: #666666;
  font-size: 16px;
  text-align: center;
  img {
    width: 100%;
    display:block;
    border: 1px solid #C7D3E7;
  }
}
.more-btn {
  width:190px;
  height:50px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(51, 51, 51, 1);
  font-size:16px;
  line-height: 50px;
  color:#333333;
  text-align: center;
  margin: 93px auto 70px;
  cursor: pointer;
}
.banner {
  width: 100%;
  img {
    width: 100%;
    display: block;
  }
}
.partner-list ul {
  display: flex;
  justify-content:space-between;
  margin-bottom: 20px;
}
.partner-list li {
  img {
    width: 100%;
    display:block;
    border: 1px solid #C7D3E7;
  }
}
</style>
